<template>
  <div class="top-bar">
    <div class="top-bar-left">
      <ElTabs v-model="globalStore.nowRoute" type="card" closable class="demo-tabs" @tab-click="turnPage" @tab-remove="closeItem">
        <ElTabPane v-for="item in globalStore.arrayCacheRoute" :key="item.name" :label="item.meta.titleSub" :name="item.path">
        </ElTabPane>
      </ElTabs>
    </div>
    <div class="top-bar-right">
      <ElButton type="primary" size="small" @click="closeOthers">关闭其他</ElButton>
      <ElButton type="primary" size="small" @click="closeAll">关闭所有</ElButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import useGlobalStore from '@/store/modules/global'
// 全局缓存
const globalStore = useGlobalStore()
const turnPage = (targetName: any) => {
  console.log(targetName, 'targetName')
  router.push(targetName.props.name)
  globalStore.setNowRoute(targetName.props.name)
}
// 单个关闭
const closeItem = (name: any) => {
  let routeList = globalStore.arrayCacheRoute
  let indexClose = routeList.findIndex((i: any) => {
    return i.path == name
  })
  routeList.splice(indexClose, 1)
  if (routeList.length == 0) {
    closeAll()
  } else {
    switch (indexClose) {
      case 0:
        router.push(routeList[indexClose].path)
        break
      default:
        router.push(routeList[indexClose - 1].path)
        break
    }
  }
}
// 关闭全部
const closeAll = () => {
  globalStore.setArrayCacheRoute([])
  router.push('/works-manage')
}
// 关闭其他
const closeOthers = () => {
  let item = {}
  globalStore.arrayCacheRoute.map((v: any) => {
    if (v.path == globalStore.nowRoute) {
      item = v
    }
  })
  globalStore.setArrayCacheRoute([item])
}
</script>

<style scoped lang="scss">
.top-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  &-right {
    line-height: 40px;
  }
}
</style>
